<template>
  <div>
    <h3>提现分单时间区间设置</h3>
    <el-form
      ref="configsForm"
      :rules="configsRule"
      :inline="true"
      :model="form">
      <el-row>
        <el-col>
          <el-form-item label="“早班”时间区间设置（精确到秒）" prop="firstBeginTime">
            <el-time-picker
              v-model="form.firstBeginTime"
              placeholder="开始时间">
            </el-time-picker>  至
          </el-form-item>
          <el-form-item label="" prop="firstEndTime">
            <el-time-picker
              v-model="form.firstEndTime"
              placeholder="结束时间">
            </el-time-picker>
          </el-form-item>
          <el-form-item v-if="forTime(form.firstBeginTime) > forTime(form.firstEndTime)" label="跨天时间区间"></el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="“中班”时间区间设置（精确到秒）" prop="secondBeginTime">
            <el-time-picker
              v-model="form.secondBeginTime"
              placeholder="开始时间">
            </el-time-picker>  至
          </el-form-item>
          <el-form-item label="" prop="secondEndTime">
            <el-time-picker
              v-model="form.secondEndTime"
              placeholder="结束时间">
            </el-time-picker>
          </el-form-item>
          <el-form-item v-if="forTime(form.secondBeginTime) > forTime(form.secondEndTime)" label="跨天时间区间"></el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="“晚班”时间区间设置（精确到秒）" prop="thirdBeginTime">
            <el-time-picker
              v-model="form.thirdBeginTime"
              placeholder="开始时间">
            </el-time-picker>  至
          </el-form-item>
          <el-form-item label="" prop="thirdEndTime">
            <el-time-picker
              v-model="form.thirdEndTime"
              placeholder="结束时间">
            </el-time-picker>
          </el-form-item>
          <el-form-item v-if="forTime(form.thirdBeginTime) > forTime(form.thirdEndTime)" label="跨天时间区间"></el-form-item>

        </el-col>
        <el-col>
          <el-button class="filter-item" type="primary" icon="el-icon-printer" @click="doSave({action: 'saveForm', form: 'configsForm'})">保存</el-button>
          <el-button @click="doAction({action: 'resetTimeApi',type:'get'})">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <h3>提现分单条件设置</h3>
    <el-form :inline="true" :model="filters" ref="ruleForm" class="demo-form-inline">
      <el-form-item label="条件名">
        <el-input v-model="filters.conditionName" placeholder="请输入条件名"></el-input>
      </el-form-item>
      <el-form-item label="层级" prop="userLevel">
        <el-select :collapse-tags="true" v-model="filters.userLevel" multiple placeholder="请选择层级" class="with-pre-userLevel">
          <el-option label="代理"
                     :key="-1"
                     :value="-1">
          </el-option>
          <el-option
            v-for="item in levelList"
            :label="item.name"
            :key="item.levelId"
            :value="item.levelId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出款类型" prop="dealType">
        <el-select v-model="filters.withdrawType" placeholder="请选择出款类型">
          <el-option
            :label="'全部'"
            :key="consts.ALL"
            :value="consts.ALL"
          ></el-option>
          <el-option
            v-for="item in consts.WITHDRAW_DEAL_TYPE"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
      <el-button type="primary" icon="el-icon-plus" v-if="roleCheck('withdraw-main-add')" @click="openDialog({dialogName: staticDialogName})">添加</el-button>
      <el-button @click="cancel()">重置</el-button>
    </el-form>
    <el-table
      border
      :data="tableData" v-loading="loading" element-loading-text="加载中..." class="el-table-align-center">
      <el-table-column label="条件名称" prop="conditionName" align="center"></el-table-column>
      <el-table-column label="层级设置" align="center">
        <template slot-scope="{row}">
          <span
            style="color: #409eff;cursor: pointer"
            v-if="roleCheck('withdraw-main-view')"
            @click="openDialog({props:row,dialogName:staticDialogName1})"
            type="text">{{row.levelName}}  {{row.levelId.split(',').length > 3 ? '等'+row.levelId.split(',').length+'个层级': ''}}
          </span>
          <span v-else>{{row.levelName}}  {{row.levelId.split(',').length > 3 ? '等'+row.levelId.split(',').length+'个层级': ''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="金额区间设置" align="center">
        <template slot-scope="{row}">
          {{row.minAmount}}-{{row.maxAmount}}
        </template>
      </el-table-column>
      <el-table-column label="出款类型" prop="accountType" align="center">
        <template slot-scope="{row}">
          {{row.withdrawType | toConverter('OUT_TYPE_PAY')}}
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark">
      </el-table-column>
      <el-table-column label="操作" fixed="right" align="center" width="100">
        <template slot-scope="{row}">
          <el-button type="text" v-if="roleCheck('withdraw-main-del')" @click="handleDelete(row)">删除</el-button>
          <el-button type="text" v-if="roleCheck('withdraw-main-edit')" @click="openDialog({props:row,dialogName: staticDialogName2})">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-conditions-dialog
      v-if="dialogName === staticDialogName"
      v-model="dialogVisible"
      @submit="submitFinished"/>
    <edit-conditions-dialog
      v-if="dialogName === staticDialogName2"
      v-model="dialogVisible"
      :row-data="dialogProps"
      @submit="submitFinished"/>
    <level-view-dialog
      v-if="dialogName === staticDialogName1"
      v-model="dialogVisible"
      :row-level-id="dialogProps.levelId"
      @submit="submitFinished"/>
  </div>
</template>

<script>
  import {form,factory,dialog,grid} from '@/build'
  import {withdrawTimingConfig,withdrawTimingGet,withdrawConditionList,withdrawConditionDelete} from "@/services/api/withdraw";
  import {getUserLevelList} from "@/services/api/userLevel";
  import AddConditionsDialog from "@/views/finance/withdraw/addConditionsDialog";
  import EditConditionsDialog from "@/views/finance/withdraw/editConditionsDialog";
  import LevelViewDialog from "@/views/finance/withdraw/levelViewDialog";
  export default {
    name: "withdraw-configs",
    mixins: [form,factory,dialog,grid],
    components:{
      AddConditionsDialog,
      EditConditionsDialog,
      LevelViewDialog
    },
    data() {
      return {
        levelList:[],
        dialogVisible:false,
        staticDialogName:'add-conditions-dialog',
        staticDialogName1:'level-view-dialog',
        staticDialogName2:'edit-conditions-dialog',
        form:{
          firstBeginTime: undefined,
          firstEndTime :undefined,
          secondBeginTime : undefined,
          secondEndTime : undefined,
          thirdBeginTime : undefined,
          thirdEndTime : undefined,
        },
        tableData:[],
        configsRule:{
          firstBeginTime:[
            {required: true,message:'早班开始时间不能为空'}
          ],
          firstEndTime:[
            {required: true,message:'早班结束时间不能为空'}
          ],
          secondBeginTime:[
            {required: true,message:'午班开始时间不能为空'}
          ],
          secondEndTime:[
            {required: true,message:'午班结束时间不能为空'}
          ],
          thirdBeginTime:[
            {required: true,message:'晚班开始时间不能为空'}
          ],
          thirdEndTime:[
            {required: true,message:'晚班结束时间不能为空'}
          ]
        },
        filters: {
          size:20,
          page:1,
          conditionName:undefined,
          userLevel:[],
          withdrawType:-1
        },
      }
    },
    methods:{
      formatTime(time){
        return time.toString().substr(-8,8)
      },
      handleDelete({id}) {
        this.$confirm(`删除提现分单条件设置？`, '删除条件', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          withdrawConditionDelete({
            conditionId:id,
          }).then(([result, data]) => {
            if (result) {
              this.doGet({action: 'getGrid'});
              this.$message({
                type: 'success',
                message: `删除成功!`
              });
            } else {
              this.$message({
                type: 'error',
                message: `删除失败!${data.message}`
              });
            }
          });
        })
          .catch(() => {
          })
      },
      forTime(time){
        return new Date(time).getTime()
      },
      cancel(){
        this.filters= {
          size:20,
          page:1,
          conditionName:undefined,
          userLevel:[],
          withdrawType:-1
        },
          this.doGet({action:'getGrid'})
      },
      submitFilterForm() {
        this.gridSearch()
      },
    },
    mounted() {
      this.bindGet(getUserLevelList, 'levelList', { })
      this.bindSave(withdrawTimingConfig, 'saveForm', 'form', {
        beforeSend: data => {
         const {firstBeginTime,firstEndTime,secondBeginTime,secondEndTime,thirdBeginTime,thirdEndTime} = data
          return{
            firstBeginTime:_.toTime(firstBeginTime),
            firstEndTime:_.toTime(firstEndTime),
            secondBeginTime:_.toTime(secondBeginTime),
            secondEndTime:_.toTime(secondEndTime),
            thirdBeginTime:_.toTime(thirdBeginTime),
            thirdEndTime:_.toTime(thirdEndTime),
          }
        },
      });
      this.bindGet(withdrawTimingGet, "form", {
        action:'resetTimeApi',
        format: data => {
          const time =  new Date(moment().format('YYYY-MM-DD 00:00:00'))
          return  data&&{
            firstBeginTime: new Date(data.firstBeginTime),
            firstEndTime : new Date(data.firstEndTime),
            secondBeginTime : new Date(data.secondBeginTime),
            secondEndTime : new Date(data.secondEndTime),
            thirdBeginTime : new Date(data.thirdBeginTime),
            thirdEndTime : new Date(data.thirdEndTime),
          } || {
            firstBeginTime: time,
            firstEndTime :time,
            secondBeginTime : time,
            secondEndTime : time,
            thirdBeginTime : time,
            thirdEndTime : time,
          }
        }
      });
      this.bindGet(withdrawConditionList, 'tableData', {
        action:'getGrid',
        beforeSend:(data)=>{
          return{
            ...this.filters,
            userLevel:this.filters.userLevel.length > 0 ? this.filters.userLevel.join(',') : ''
          }
        }
      });
      this.getAll();
    },
  }
</script>

<style lang="scss" scoped>
  /deep/ .with-pre-userLevel .el-tag{
    max-width: 105px!important;
  }
</style>
